<script setup>
import NavBar from '@/components/NavBar/index.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'  
import { login } from '@/api/system/user'
import { useUserStore } from '@/stores/user'

const loginForm = ref({
    username: '',
    password: ''
})
const userStore = useUserStore()
const router = useRouter()

function handleLogin() {
    if (!loginForm.value.username) {
        ElMessage.error('请输入用户名')
        return
    }
    if (!loginForm.value.password) {
        ElMessage.error('请输入密码')
        return
    }
    // login
    login(loginForm.value).then(res => {
        ElMessage.success('登录成功')

        // 页面跳转 && 存储token
        userStore.setSk(res.data.sk)
        userStore.setUserInfo(res.data.user)

        console.log()
        router.replace({ path: '/menu-list' })
    })
}

</script>

<template>
    <NavBar />
    <Main>
        <div class="py-8 text-center border-b border-gray-50 flex flex-col items-center">
            <div class="w-full lg:w-1/4 md:w-1/2">
                <div class="flex justify-between items-end">
                    <span class="text-3xl font-bold text-gray-600">登录</span>
                    <span class="text-sm">
                        <span class="text-gray-600">没有账号?</span>
                        <span class="ml-2 text-blue-500">点此注册</span>
                    </span>
                </div>
                <el-form class="mt-8">
                    <el-form-item>
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="loginForm.rememberMe" class="mr-2">记住我</el-checkbox>
                    </el-form-item>
                </el-form>
                <el-button class="w-full" type="primary" @click="handleLogin">登录</el-button>
                <div class="mt-4 text-sm text-blue-500 pointer-cursor">已有账号，忘记密码？</div>
            </div>
        </div>
    </Main>

</template>